<template>
	<view class="evaluation">
		<image :src="params.gameBg" class="bg" mode="aspectFill"></image>
		<view class="evaluation-box">
			<view class="game-result">
				<image src="../../static/img/result.png" mode="heightFix"></image>
				<view class="card">
					<view class="title">{{data.bodyBrief}}</view>

					<view class="box">
						<view class="left">
							<text class="scale">{{data.numericalValue}}</text>
							<text>{{data.numericalName}}</text>
						</view>
						<!-- <view class="line"></view> -->
						<view class="right">
							<text>你的测试结果是</text>
							<view class="tag">“{{data.Title}}”</view>
						</view>
					</view>

					<image class="illustration" :src="data.ShareImgUrl" mode="aspectFill"></image>

					<view class="content">{{data.Descrption}}</view>
					
					<view class="game-btns">
						<navigator class="btn" open-type="reLaunch" url="/pages/index/index">更多好玩</navigator>
						<navigator class="btn" open-type="navigateBack">再测一次</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['data'],
		data() {
			return {
				params: { // 图片参数
					gameBg: 'https://file.91daihuo.cn/7c000f1438bf4058ab1fbf966a54a1cb.png',
					gameContent: require('static/img/game_content.png')
				},
			}
		},
		methods: {
			more() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			again() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.evaluation {
		position: relative;

		&-box {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: center;
		}

		.bg {
			width: 100vw;
			height: 100vh;
		}
	}

	.game-result {
		width: 672rpx;
		height: 1062rpx;
		position: relative;
		margin-top: 170rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.card {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		padding: 0 40rpx;

		.title {
			// width: 494rpx;
			height: 70rpx;
			line-height: 70rpx;
			display: block;
			margin: 20rpx auto 116rpx;
			font-size: 40rpx;
			font-weight: bolder;
			color: #5ea6ff;
			text-align: center;
		}

		.illustration {
			width: 100%;
			height: 334rpx;
			margin-top: 16rpx;
			border-radius: 16rpx;
			overflow: hidden;
		}

		.content {
			margin: 20rpx 0;
			width: 100%;
			height: 290rpx;
			background: #d0efff;
			border-radius: 8rpx;
			font-weight: 400;
			text-align: left;
			color: #5ea6ff;
			line-height: 40rpx;
			padding: 8rpx;
		}

		.box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #5EA6FF;

			.left {
				font-size: 28rpx;
				line-height: 40rpx;

				text {
					display: block;
				}

				.scale {
					font-size: 64rpx;
					line-height: 1.1;
					font-weight: bold;
				}
			}

			.right {
				font-size: 32rpx;
				line-height: 44rpx;

				.tag {
					height: 68rpx;
					line-height: 68rpx;
					background: #d0efff;
					border-radius: 8rpx;
					font-size: 48rpx;
					font-weight: bold;
				}
			}

			.line {
				width: 0;
				height: 60rpx;
				border-right: 2px dashed #5EA6FF;
			}
		}
	}

	.game-btns {
		position: absolute;
		width: 100%;
		bottom: -20rpx;
		left: 0;
		display: flex;
		justify-content: space-around;
		padding: 0 40rpx;

		.btn {
			text-align: center;
			width: 212rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #3f0aa9;
			border-radius: 16rpx;
			overflow: hidden;
			color: #FFFFFF;
			font-size: 34rpx;
		}
	}
</style>
